import React, {useState} from "react";
// import {History,Location} from "@types"
import styles from "./main.module.css";
import {
  // useHistory,
  // useLocation,
  // useParams,
  Link,
  RouteComponentProps,
} from "react-router-dom";
import { inject, observer } from "mobx-react";

import { Form, Row, Col, Input, Button } from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import EditableTable from "../../components/Itable/index";

export interface tableInfoState {
  // expand: boolean
}

export interface tableInfoProps extends RouteComponentProps {
  //继承路由prop参数 获取路由信息
  name?: string;
  // tableInfoStore?: UserInfoStore;
}

// @inject("userInfoStore")
// export default class TableInfo extends React.Component<
//   tableInfoProps,
//   tableInfoState
// > {
//   static defaultProps = {
//     //设置props默认值方法
//     name: "用户列表",
//   };

//   state = {
//     expand: false,
//   };

//   setExpand(){
//     this.setState({expand: true})
//   }

//   render() {
//     // let history = useHistory(); //函数组件才能用
//     // let location = useLocation(); //函数组件才能用
//     // let params = useParams(); //函数组件才能用
//     // console.log(this);
//     // const [form] = Form.useForm();

//     // const getFields = () => {
//     //   const count = expand ? 10 : 6;
//     //   const children = [];
//     //   for (let i = 0; i < count; i++) {
//     //     children.push(
//     //       <Col span={8} key={i}>
//     //         <Form.Item
//     //           name={`field-${i}`}
//     //           label={`Field ${i}`}
//     //           rules={[
//     //             {
//     //               required: true,
//     //               message: 'Input something!',
//     //             },
//     //           ]}
//     //         >
//     //           <Input placeholder="placeholder" />
//     //         </Form.Item>
//     //       </Col>,
//     //     );
//     //   }
//     //   return children;
//     // };

//     // const onFinish = (values: any) => {
//     //   console.log('Received values of form: ', values);
//     // };

//     return (
//       <Form
//         form={form}
//         name="advanced_search"
//         className="ant-advanced-search-form"
//         onFinish={onFinish}
//       >
//         <Row gutter={24}>{getFields()}</Row>
//         <Row>
//           <Col span={24} style={{ textAlign: 'right' }}>
//             <Button type="primary" htmlType="submit">
//               Search
//             </Button>
//             <Button
//               style={{ margin: '0 8px' }}
//               onClick={() => {
//                 form.resetFields();
//               }}
//             >
//               Clear
//             </Button>
//             <a
//               style={{ fontSize: 12 }}
//               onClick={() => {
//                 setExpand(!expand);
//               }}
//             >
//               {expand ? <UpOutlined /> : <DownOutlined />} Collapse
//             </a>
//           </Col>
//         </Row>
//       </Form>
//     );
//   }
// }

export const TableInfo = inject("tableInfoStore", "userInfoStore")(observer(({tableInfoStore, userInfoStore}: any) =>
  
    {
      console.log("tableInfoStore", tableInfoStore, "userInfoStore", userInfoStore)
      const [expand, setExpand] = useState(false);
      const [form] = Form.useForm();
    
      const getFields = () => {
        const count = expand ? 10 : 6;
        const children = [];
    
        for (let i = 0; i < count; i++) {
          children.push(
            <Col span={8} key={i}>
              <Form.Item
                name={`field-${i}`}
                label={`Field ${i}`}
                rules={[
                  {
                    required: true,
                    message: 'Input something!',
                  },
                ]}
              >
                <Input placeholder="placeholder" />
              </Form.Item>
            </Col>,
          );
        }
    
        return children;
      };
    
      const onFinish = (values: any) => {
        console.log('Received values of form: ', values);
      };
    
      return (
        <Form
          form={form}
          name="advanced_search"
          className="ant-advanced-search-form"
          onFinish={onFinish}
        >
          <Row gutter={24}>{getFields()}</Row>
          <Row>
            <Col
              span={24}
              style={{
                textAlign: 'right',
              }}
            >
              <Button type="primary" htmlType="submit">
                Search
              </Button>
              <Button
                style={{
                  margin: '0 8px',
                }}
                onClick={() => {
                  form.resetFields();
                }}
              >
                Clear
              </Button>
              <a
                style={{
                  fontSize: 12,
                }}
                onClick={() => {
                  setExpand(!expand);
                }}
              >
                {expand ? <UpOutlined /> : <DownOutlined />} Collapse
              </a>
            </Col>
          </Row>
          <EditableTable></EditableTable>
        
        </Form>
      );
    }
  
));
